<template>
	<view class="container">
		<view class="top" style="width: 710rpx;height: 76rpx;background-color: #FFF;padding-top: 10rpx;padding-left: 20rpx;padding-right: 20rpx;">
			<u-search placeholder="请输入券名" v-model="itemName" @search='search' @custom='search'></u-search>
		</view>
		<view style="display: flex;flex-direction: column;">
			<view class="content" v-for="(row, index) in dataList" :key='index'
			style="display: flex;flex-direction: row;background-color: #FFF;align-items: center;padding: 12rpx 0;position: relative;
			background-color: #fffbf2;margin-top: 16rpx;">
				<view style="width: 240rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<template v-if="row.types == '1'">
						<view style="font-size: 40rpx;color: #fe9808;">1次</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">免费兑换</view>
					</template>
					<template v-if="row.types == '2'">
						<view style="font-size: 40rpx;color: #fe9808;">¥{{$count.mul(row.money, 1)}}</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">无门槛券</view>
					</template>
					<template v-if="row.types == '4'">
						<view style="font-size: 40rpx;color: #fe9808;">¥{{$count.mul(row.money, 1)}}</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">满{{$count.mul(row.fullMoney, 1)}}元可用</view>
					</template>
				</view>
				<view class="center" style="width: 490rpx;">
					<view  style="display: flex;flex-direction: row;align-items: center;;margin-top: 12rpx;">
						<view style="width: 80rpx;height: 34rpx;border-radius: 17rpx;text-align: center;line-height: 34rpx;font-size: 20rpx;color: #FFF;background-color: #fe9808;">{{row.typesLabel}}</view>
						<view style="margin-left: 12rpx;">{{row.name}}</view>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
						<text style="color: #666;font-size: 24rpx;">发布总数：{{row.count}}, 剩余：{{row.remainCount}}张</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
						<text style="color: #666;font-size: 24rpx;">单人最大领取数量：{{row.maxCount}}</text>
					</view>
					<view style="display: flex;flex-direction: column;;margin-top: 10rpx;">
						<view style="font-size: 24rpx;color: #999;">{{$time.dateFormat('yyyy.mm.dd', row.startTime)}} - {{$time.dateFormat('yyyy.mm.dd', row.endTime)}}</view>
						<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
							<text style="color: #999;font-size: 24rpx;">{{row.weeksLabel}},{{row.timesLabel}}可用</text>
						</view>
					</view>
					<view style="font-size: 24rpx;color: #999;margin-top: 10rpx;">发布时间：{{$time.dateFormat('yyyy-mm-dd HH:MM:SS', row.createTime)}}</view>
				</view>
			</view>
			<view style="padding-top: 300rpx;" v-if='showEmpty'>
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { trade } from '@/api/trade.js'
	import { privilege } from '@/api/privilege.js'
	export default{
		components: {},
		data() {
			return {
				page: 1,
				size: 20,
				dataList: [],
				showEmpty: false,
				isLastPage: false,
				itemName: '',
				lesseeId: ''
			}
		},
		onLoad() {
			this.lesseeId = this.$Route.query.lesseeId
			this.getDataList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getDataList()
		},
		onReachBottom() {
			if(this.isLastPage) {
				return
			}
			this.getDataList()
		},
		methods:{
			search(){
				this.page = 1
				this.getDataList()
			},
			getTradeList() {
				trade.getTradeList().then(res => {
					if(res.data.code == 10000){
						this.tabsForTrades = res.data.data.list
						this.tabsChange(this.current)
					}
				})
			},
			getDataList() {
				var params = {
					page: this.page,
					size: this.size,
					name: this.itemName,
					lessee: this.lesseeId
				}
				privilege.getPrivilegeList(params).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.dataList = []
						}
						var list = res.data.data.list
						this.dataList = [...this.dataList, ...list]
						this.showEmpty = this.dataList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
			ckeckCoupon(val){
				var params = {
					lesseeId: val.lessee
				}
				if(val.isHasGet){
					params.couponId = val.couponModel.id
				}else{
					params.privilegeId = val.id
				}
				this.$Router.push({
					name: 'qrCode',
					params: params
				})
			},
			// 领券
			getCouponAction(val, index){
				privilege.getCoupon({
					privilegeId: val.id
				}).then(res => {
					if(res.data.code == 10000){
						var couponModel = res.data.data
						uni.showToast({
							title: '领券成功',
							icon: 'success'
						})
						this.$set(val, 'isHasGet', 1)
						val.remainCount--
						this.$set(val, 'couponModel', couponModel)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>
